<template>
  <div>
    <h1>Button 按钮</h1>
    <hr />
    <p>常用的操作按钮。</p>
    <h2>基础用法</h2>
    <p>使用 type、plain、round 和 circle 来定义按钮的样式。</p>
    <Demo :component="Button1Demo" />
    <h2>调整尺寸</h2>
    <p>
      除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
      使用 size 属性额外配置尺寸，可使用big和small两种值。
    </p>
    <Demo :component="Button2Demo" />
    <h2>禁用状态</h2>
    <p>你可以使用 disabled 属性来定义按钮是否被禁用</p>
    <p>
      使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean类型的值。
    </p>
    <Demo :component="Button4Demo" />
    <h2>点击按钮来加载数据，并向用户反馈加载状态。</h2>
    <p>通过设置 loading 属性为 true 来显示加载中状态。</p>
    <Demo :component="Button5Demo" />
    <div class="button-attributes">
      <h2>Button 参数</h2>
      <table class="attributes-table" style="font-weight: bolder;">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>可选值</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>type</td>
            <td>按钮类型</td>
            <td>String</td>
            <td>main / default / success / danger / link / text</td>
            <td>default</td>
          </tr>
          <tr>
            <td>size</td>
            <td>按钮大小</td>
            <td>String</td>
            <td>small / normal / big</td>
            <td>normal</td>
          </tr>
          <tr>
            <td>disabled</td>
            <td>是否禁用</td>
            <td>Boolean</td>
            <td>false / true</td>
            <td>false</td>
          </tr>
          <tr>
            <td>loading</td>
            <td>按钮载入状态</td>
            <td>Boolean</td>
            <td>false / true</td>
            <td>false</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import Button from "../lib/Button.vue";
import Demo from "./Demo.vue";
import Button1Demo from "./Button1Demo.vue";
import Button2Demo from "./Button2Demo.vue";
import Button4Demo from "./Button4Demo.vue";
import Button5Demo from "./Button5Demo.vue";

export default {
  components: { Demo, Button },
  setup() {
    return { Button1Demo, Button2Demo, Button4Demo, Button5Demo };
  },
};
</script>

<style lang="scss" scoped>
@import "src/helper.scss";
p {
  color: black;
  opacity: .7;
  margin: 10px 0;
}
h2 {
  font-weight: bold;
}
</style>
